import React from 'react';
import { Spin, Typography } from 'antd';
import { LoadingOutlined } from '@ant-design/icons';
import { useThemeStore } from '../../stores/themeStore';
import { getTheme } from '../../theme/config';
import '../custom/customComponents.css'; // 引入自定义组件样式

const { Text } = Typography;

interface LoadingSpinnerProps {
  size?: 'small' | 'default' | 'large';
  text?: string;
  fullScreen?: boolean;
  spinning?: boolean;
  children?: React.ReactNode;
}

const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
  size = 'default',
  text,
  fullScreen = false,
  spinning = true,
  children
}) => {
  const { mode } = useThemeStore();
  const theme = getTheme(mode);
  const antIcon = <LoadingOutlined style={{ fontSize: size === 'large' ? 32 : size === 'small' ? 16 : 24, color: theme.glowColor }} spin />;

  if (fullScreen) {
    return (
      <div className="loading-spinner-fullscreen" style={{
        position: 'fixed',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: theme.contentBackground,
        zIndex: 9999,
      }}>
        <Spin indicator={antIcon} size={size} />
        {text && (
          <Text style={{ color: theme.textPrimary, marginTop: 16, fontSize: 16 }}>
            {text}
          </Text>
        )}
      </div>
    );
  }

  if (children) {
    return (
      <Spin spinning={spinning} indicator={antIcon} size={size} tip={text}>
        {children}
      </Spin>
    );
  }

  return (
    <div className="loading-spinner-container" style={{
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      padding: '40px 20px',
      background: theme.cardBackground,
      borderRadius: '8px',
      border: `1px solid ${theme.cardBorder}`,
      backdropFilter: 'blur(10px)',
    }}>
      <Spin indicator={antIcon} size={size} />
      {text && (
        <Text style={{ marginTop: 16, color: theme.textSecondary }}>
          {text}
        </Text>
      )}
    </div>
  );
};

export default LoadingSpinner;